<template>
    <div>
        <h1>房型修改</h1>
        <table class="table table-bordered">
            <tr>
                <td>房型名称</td>
                <td>
                    <input type="text" v-model="t.houseTypeName">
                </td>
            </tr>
            <tr>
                <td>房型面颊</td>
                <td>
                    <input type="text" v-model="t.houseArea">
                </td>
            </tr>
            <tr>
                <td>房型价格</td>
                <td>
                    <input type="text" v-model="t.price">
                </td>
            </tr>
            <tr>
                <td>是否有窗</td>
                <td>
                    <input type="radio" name="isno" v-model="t.isWindows" :value="0">否
                    <input type="radio" name="isno" v-model="t.isWindows" :value="1">是
                </td>
            </tr>
            <tr>
                <td>入住人数</td>
                <td>
                    <input type="text" v-model="t.peopleCount">
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <input type="radio" name="st" v-model="t.state" :value="0">上架
                    <input type="radio" name="st" v-model="t.state" :value="1">下架
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input type="file" @change="Imagse">
                    <img v-if="t.photo != ''" :src="t.photo" alt="" style="width: 100px; height: 100px;">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="修改" class="btn btn-primary" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

let router = useRouter();
let route = useRoute();

let data: any = reactive({
    t: {
        "houseTypeName": "",
        "houseArea": "",
        "price": "",
        "isWindows": 0,
        "peopleCount": "",
        "state": 0,
        "photo": "",
    },
});

let { t } = toRefs(data);

const add = () => {
    if(t.value.houseTypeName == "" || t.value.houseArea == "" || t.value.price == "" || t.value.peopleCount == ""|| t.value.photo == ""){
        alert("请输入完整信息不鞥为空");
        return;
    }
    
    let obj = {
        id: route.query.id,
        "houseTypeName": t.value.houseTypeName,
        "houseArea": t.value.houseArea,
        "price": t.value.price,
        "isWindows": t.value.isWindows,
        "peopleCount": t.value.peopleCount,
        "state": t.value.state,
        "photo": t.value.photo,
    }
    axios({
        url: '/api/Test/Update',
        method: 'put',
        data: obj
    }).then((res) => {
        if (res.data.data == 1) {
            alert('修改成功');
            router.push('/list');
        }
        else {
            alert('修改失败');
            return;
        }

    }).catch((err) => {
        console.log(err);
    })

}

const Imagse = (e: any) => {
    let obj = e.target.files[0];
    let formate = new FormData();
    formate.append('file', obj);
    axios({
        url: '/api/Test/Iamgess',
        method: 'post',
        data: formate
    }).then((res) => {
        t.value.photo = "https://localhost:7201" + res.data.data;
    }).catch((err) => {
        console.log(err);
    })

}
onMounted(() => {
    FanTian();
})
const FanTian=()=>{
    let obj = {
        id:route.query.id
    }
    axios({
        url: '/api/Test/FanTian',
        method: 'get',
        params: obj
    }).then((res) => {
        t.value= res.data.data;
    })
       
}
</script>

<style scoped></style>